import React, { Component } from 'react'
import AmpStoriesIcon from '@material-ui/icons/AmpStories';
import "./Practice.less"
import { TipListApi } from "@/request/api"
import Wenda from "@/components/Practice/Wenda"
import DanXuan from "@/components/DanXuan/DanXuan"



// 手指触摸点
let startX = -1;
// 手指松开点
let endX = -1;
// 当前li的索引值
let liIndex = 0;
export default class Practice extends Component {


    state = {
        // 答题内容
        timuArr: [],
        ulLeft: 0,
        // 答案的显示隐藏
        showDaan: false,
        tipName: {
            all: "全部",
            qa: "问答",
            code: "编程",
            fill: "填空",
            one: "单选",
            check: "判断",
            many: "多选"
        }
    }

    async componentDidMount() {
        // console.log(this.props);
        let res = await TipListApi({
            testNum: this.props.location.state.testNum,
            testType: this.props.location.state.testType,
            actionCode: this.props.location.state.actionCode,
            questionType: this.props.location.state.questionType
        })
        this.setState({
            timuArr: res.data
        })
        // console.log(res);
        // console.log(this.state.timuArr);
    }

    render() {
        return (
            <div className="Practice">
                <div className="top">
                    <div className="top-l">
                        <AmpStoriesIcon />
                        <div className="top_index">
                            <b>{Math.abs(liIndex)}</b>
                            <span>/</span>
                            <span>{this.props.location.state.testNum}</span>
                        </div>
                    </div>
                    <div className="sc">
                        <span>收藏</span>
                        <input type="checkbox" />
                    </div>
                </div>
                <ul
                    className="timu"
                    style={{
                        width: this.state.timuArr.length * 100 + "%",
                        left: this.state.ulLeft,
                    }}
                    onTouchStart={this.handleTouchStart.bind(this)}
                    onTouchMove={this.handleTouchMove.bind(this)}
                    onTouchEnd={this.handleTouchEnd.bind(this)}
                >
                    {
                        this.state.timuArr.map((item, index) =>
                            <li key={index}>
                                {/* <div className="m">
                                    <div className="c">
                                        <span className="s-title">{this.state.dir[item.questionType]}</span>
                                        <span className="title">{item.title}</span>
                                    </div>
                                    <div className="m-text">
                                        <textarea name="" id="" cols="45" rows="15" className="textarea" placeholder="请输入答案"></textarea>
                                    </div>
                                </div>
                                <p>此类型题目暂不支持打分，按正确记分</p>
                                <div className="btn" onClick={this.daanFn.bind(this)}>确定</div>
                                <div style={{ display: this.state.showDaan ? "block" : "none" }} dangerouslySetInnerHTML={{ __html: item.answer || "<div>这是富文本的内容</div>" }}></div> */}
                                <Wenda timu={item} actionCode={this.props.location.state} zuJian={item.questionType === "qa" ? true : false} ></Wenda>
                                <DanXuan timu={item} actionCode={this.props.location.state} tipName={this.state.tipName} zuJian={item.questionType === "one" ? true : false}></DanXuan>
                            </li>
                        )
                    }
                </ul>

            </div>
        )
    }


    // 手指触摸到屏幕
    handleTouchStart(e) {
        startX = e.touches[0].clientX;
    }
    // 手指滑动
    handleTouchMove(e) {
        endX = e.touches[0].clientX;
    }
    // 点击确定按钮
    daanFn() {
        this.setState({
            showDaan: true
        })
    }

    // 手指离开屏幕
    handleTouchEnd(e) {
        let _this = this;
        // 获取滑动范围
        if (startX > -1 && endX > -1) {
            let distance = Math.abs(startX - endX);
            if (distance > 30) {
                // 两个手指位置距离相差30px，即视为要滑动
                if (startX > endX) {
                    liIndex--;
                    // index是不能超过数组长度的
                    if (Math.abs(liIndex) >= _this.state.timuArr.length - 1) {
                        liIndex = -_this.state.timuArr.length + 1;
                    }
                } else {
                    liIndex++;
                    if (liIndex >= 0) {
                        liIndex = 0;
                    }
                }
                this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
                    startX = -1;
                    endX = -1;
                });
            } else {
                return;
            }
        }
    }
}